<template>
  <header class="nav-bar">
    <div class="logo">MyLogo</div>

    <nav class="menu">
      <a href="https://www.baidu.com" class="HomeTitle">首页</a>
      <a href="https://www.zhishiyisheng.com/" class="ProductTitle">产品</a>
    </nav>

    <button class="login-btn">登录</button>
  </header>
</template>

<script setup>
import { ref, onMounted } from "vue";
</script>


<style scoped>
.nav-bar {
  display: flex;
  /* justify-content: space-around; */
  justify-content: space-between;
  align-items: center; /* 垂直居中 */
  padding: 0 20px;
  height: 80px;
  background: #333;
  color: red;
}

.logo {
  background: orange;
  box-shadow: 4px 1px #fff;
}

.login-btn {
  background: #4ecdc4;
  color: white;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  box-shadow: 4px 1px #fff;
}

.menu {
  display: flex;
  flex: 1; /* 占满中间 */
  justify-content: center;
  gap: 20px; /* 菜单间距 */
}

.menu a {
  font-size: 20px;
  font-weight: bold;
  /* font-weight: 500; */
  /* box-shadow: 10px 10px 5px #888888; */
}

.HomeTitle {
  color: white;
  src: url(sansation_light.woff);
  /* src: url("https://www.baidu.com"); */
}

.ProductTitle {
  color: white;
  font: optional;
  border-radius: 10px;
}
</style>


